<template>
  <!-- 角色添加页面 -->
  <div class="door">
    <h3>角色添加</h3>
    <el-form
      ref="ruleForm"
      label-width="80px"
      class="demo-form-inline"
      :inline="true"
      :model="ruleForm"
      :rules="rules"
    >
      <!-- 角色权限 -->
      <el-row>
        <el-col :span="10">
          <el-row>
            <el-col>
              <b>角色权限</b>
            </el-col>
          </el-row>
          <!-- 1 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="角色名称" prop="roleName">
                <el-input
                  placeholder="请选择人员"
                  v-model="ruleForm.roleName"
                  size="mini"
                  style="width:150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="反锁开门">
                <el-checkbox v-model="backLock"></el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 2 -->
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-form-item label="设备型号" prop="devicemodel">
                <el-select
                  v-model="ruleForm.devicemodel"
                  placeholder="请选择"
                  size="mini"
                  clearable
                  style="width:120px"
                >
                  <el-option
                    v-for="item in terminaloption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="password" size="mini" style="width:120px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 3 -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="有效时间">
                <el-date-picker
                  v-model="startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :disabled="true"
                  style="width:180px"
                  size="mini"
                ></el-date-picker>
                <span class="time">至</span>
                <el-date-picker
                  v-model="endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="'23:59:59'"
                  size="mini"
                  style="width:180px"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="14">
          <el-row>
            <el-col :span="24">
              <b>星期</b>
            </el-col>
            <el-col :span="24">
              <el-form-item label="假日时段">
                <el-select
                  v-model="valHoliday"
                  placeholder="请选择"
                  size="mini"
                  @change="handleValOne(valHoliday,'holidayTimeStageIndex')"
                  style="width:70px"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="是否可开">
                <el-checkbox v-model="mondayChecked">一</el-checkbox>
                <el-checkbox v-model="tuesdayChecked" class="checked">二</el-checkbox>
                <el-checkbox v-model="wednesdayChecked" class="checked">三</el-checkbox>
                <el-checkbox v-model="thursdayChecked" class="checked">四</el-checkbox>
                <el-checkbox v-model="fridayChecked" class="checked">五</el-checkbox>
                <el-checkbox v-model="saturdayChecked" class="checked">六</el-checkbox>
                <el-checkbox v-model="sundayChecked" class="checked">日</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="星期时段">
                <el-select
                  v-model="valMonday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px; "
                  @change="handleValOne(valMonday,'mondayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
                <!-- // tuesdayChecked,wednesdayChecked,thursdayChecked,fridayChecked,saturdayChecked,sundayChecked -->

                <el-select
                  v-model="valTuesday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px;margin-left:6px "
                  @change="handleValOne(valTuesday,'tuesdayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
                <el-select
                  v-model="valWednesday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px;margin-left:6px "
                  @change="handleValOne(valWednesday,'wednesdayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
                <el-select
                  v-model="valThursday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px;margin-left:6px "
                  @change="handleValOne(valThursday,'thursdayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
                <el-select
                  v-model="valFriday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px;margin-left:6px "
                  @change="handleValOne(valFriday,'fridayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
                <el-select
                  v-model="valSaturday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px; margin-left:6px"
                  @change="handleValOne(valSaturday,'saturdayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
                <el-select
                  v-model="valSunday"
                  placeholder="请选择"
                  size="mini"
                  style="width:62px; margin-left:6px"
                  @change="handleValOne(valSunday,'sundayTimeStageIndex')"
                >
                  <el-option v-for="item in 16" :key="item+1" :label="item-1" :value="item-1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-button type="primary" @click="modifySelection" size="mini">修改所有</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 相关人员 -->
      <el-row>
        <el-col :span="24">
          <b>相关人员</b>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="createPersonnel" size="mini">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlePersonnelDel" size="mini">删除</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="personnelList"
            tooltip-effect="dark"
            style="width: 100%"
            :stripe="true"
            border
            :header-cell-style="headFirst"
            @selection-change="handlePersonnelChange"
            max-height="350"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="userName" label="姓名"></el-table-column>
            <el-table-column prop="cardNumber" label="卡号"></el-table-column>
            <el-table-column prop="userNumber" label="编号"></el-table-column>
            <el-table-column prop="departmentName" label="部门"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- 相关房间 -->
      <el-row>
        <el-col :span="24">
          <b>相关房间</b>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="createRoom" size="mini">添加</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleRoomDel" size="mini">删除</el-button>
          </el-form-item>
        </el-col>
        <el-col>
          <el-table
            v-loading="loading"
            :data="roomList"
            ref="table"
            border
            highlight-current-row
            style="width: 100%"
            max-height="450"
            :header-cell-style="header => headFirst(header, 2)"
            @selection-change="handleRoomChange"
            :cell-style="(res) => headFirst_col(res, [], 2)"
          >
            <el-table-column type="selection" width="40px"></el-table-column>
            <el-table-column prop="areaName" label="区域"></el-table-column>
            <el-table-column prop="areaName" label="楼栋"></el-table-column>
            <el-table-column prop="roomName" label="房间名"></el-table-column>
            <!-- 有效时间 -->
            <el-table-column prop="endTime" label="开门有效期" align="center" width="190px">
              <!-- @change="handleSelect(scope.row)" -->
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  style="width:180px"
                ></el-date-picker>
              </template>
            </el-table-column>
            <!-- 反锁开门 -->
            <el-table-column prop="backLock" label="反锁开门" align="center" width="40px">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.backLock"></el-checkbox>
              </template>
            </el-table-column>
            <!-- 开门-礼拜 -->
            <el-table-column prop="Sunday" label="星期" align="center">
              <el-table-column prop="monday" label="一" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.monday"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="tuesday" label="二" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.tuesday"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="wednesday" label="三" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.wednesday"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="thursday" label="四" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.thursday"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="friday" label="五" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.friday"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="saturday" label="六" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.saturday"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="sunday" label="日" align="center" width="40px">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.sunday"></el-checkbox>
                </template>
              </el-table-column>
            </el-table-column>
            <!-- 星期时段 -->
            <el-table-column prop="SundayTime" label="星期时段" align="center">
              <el-table-column prop="mondayTimeStageIndex" label="一" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.mondayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="tuesdayTimeStageIndex" label="二" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.tuesdayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="wednesdayTimeStageIndex" label="三" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.wednesdayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column prop="thursdayTimeStageIndex" label="四" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.thursdayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="fridayTimeStageIndex" label="五" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.fridayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="saturdayTimeStageIndex" label="六" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.saturdayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="sundayTimeStageIndex" label="日" align="center" width="82px">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.sundayTimeStageIndex"
                    placeholder="请选择"
                    size="mini"
                    @change="handleSelect(scope.row)"
                  >
                    <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
            </el-table-column>
            <!-- 假日时段 -->
            <el-table-column prop="holidayTimeStageIndex" label="假日时段" align="center" width="82px">
              <template slot-scope="scope">
                <el-select v-model="scope.row.holidayTimeStageIndex" placeholder="请选择" size="mini">
                  <el-option v-for="item in 16" :key="item-1" :label="item-1" :value="item-1"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <!-- <el-form-item label="延长有效期"></el-form-item> -->
      <el-row>
        <el-col :span="24" style="text-align:center;">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button type="primary" @click="onClos">关闭</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 房间人员设定弹窗 -->
    <add-room-jon
      v-if="addroomjonVisible"
      ref="addroomjoin"
      @refreshDataList="refreshDataList"
      :isPersonnel="true"
    ></add-room-jon>
    <!-- 楼层设定弹窗 -->
    <add-build-room
      v-if="addbuildroomVisible"
      ref="addbuildroomjoin"
      @refbuildDataList="refbuildDataList"
    ></add-build-room>
  </div>
</template>
<script>
import bus from '@/bus.js'
import AddRoomJon from './door-lock-personnel-add-join'
import AddBuildRoom from './regional-building-room'

export default {
  data() {
    return {
      // 表单数据
      ruleForm: {
        roleName: '',
        devicemodel: ''
      },
      // 规则
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
        // devicemodel: [{ required: true, message: "请选择", trigger: "blur" }]
      },
      // 设备型号
      terminaloption: [],
      // 选择多个房间
      isCheckbox: true,
      loading: false,

      // 人员数组
      personnelList: [],
      // 被选中的人员数组
      PersonnelChange: [],
      // 房间数组
      roomList: [],
      RoomChange: [],

      detailslist: [],
      pageNum: 1,
      pageSize: 10,
      currentPage: 1,
      recordCount: 0,
      searchInfo: {},
      // 姓名
      userName: '',

      // 初始时间选择
      startTime: '',
      endTime: '',
      datetime: [],
      // 密码
      password: '',
      // 是否反锁开门
      backLock: false,
      // 被选中的数据
      optPersonnel: [],

      // 是否可以选择
      mondayChecked: false,
      tuesdayChecked: false,
      wednesdayChecked: false,
      thursdayChecked: false,
      fridayChecked: false,
      saturdayChecked: false,
      sundayChecked: false,
      Checked: {
        monday: 0
      },
      // 星期时段多选
      valMonday: 0,
      valTuesday: 0,
      valWednesday: 0,
      valThursday: 0,
      valFriday: 0,
      valSaturday: 0,
      valSunday: 0,
      // 假日时段
      valHoliday: 0,
      // 添加人员弹框
      dialogVisible: false,
      addroomjonVisible: false,
      // 楼层弹窗
      addbuildroomVisible: false
    }
  },
  components: {
    AddRoomJon,
    AddBuildRoom
  },
  created() {
    this.datetime = [
      this.lasttimemon('yyyy-MM-dd HH:mm:ss'),
      this.getimeto('yyyy-MM-dd HH:mm:ss')
    ]
    // this.set(false)

    this.gestatistics()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  mounted() {
    this.startTime = this.getimeto('yyyy-MM-dd HH:mm:ss')
    this.endTime = this.getNow(7)
    this.terminalselect()
    console.log(this.terminaloption)
  },
  methods: {
    handleSelect() {},
    // 刷新角色管理页面
    set(val) {
      this.$store.commit('common/updateRole', val)
    },
    // json数据数组去重并合并
    getRemoval(arr1, arr2, key) {
      let arr = [...arr1, ...arr2]
      let obj = {}
      let newarr = []
      for (const value of arr) {
        // 利用对象的唯一性进行判断
        if (!obj[value[key]]) {
          // 不含有该对象就push到新数组
          obj[value[key]] = true
          newarr.push(value)
        }
      }
      return newarr
    },
    // 删除arr2中有arr1的数据
    getDelArr(arr1, arr2, key) {
      const userGuid1 = arr2.map(v => v[key])
      const newArr1sp = arr1.filter(item => !userGuid1.includes(item[key]))
      const userGuid2 = arr1.map(v => v[key])
      const newArr2sp = arr2.filter(item => !userGuid2.includes(item[key]))
      const newArr = [...newArr1sp, ...newArr2sp]
      return newArr
    },
    // 多选框是否选中
    handleChange(row, key, b) {
      if (row[key] == 0) {
        row[key] = 1
      } else if (row[key] == 1) {
        row[key] = 0
      } else if (row[key] == null) {
        row[key] = 1
      }
      console.log(row)
      console.log(this.Checked[key])
    },
    // 星期修改所有
    modifySelection() {
      console.log(this.mondayChecked)
      this.roomList.map(item => {
        // 反锁开门
        item.backLock = this.backLock
        // 结束时间
        item.endTime = this.endTime
        // 假日时段
        item.holidayTimeStageIndex = this.valHoliday
        item.mondayTimeStageIndex = this.valMonday
        item.tuesdayTimeStageIndex = this.valTuesday
        item.wednesdayTimeStageIndex = this.valWednesday
        item.thursdayTimeStageIndex = this.valThursday
        item.fridayTimeStageIndex = this.valFriday
        item.saturdayTimeStageIndex = this.valSaturday
        item.sundayTimeStageIndex = this.valSunday
        // 星期
        item.monday = this.mondayChecked
        item.tuesday = this.tuesdayChecked
        item.wednesday = this.wednesdayChecked
        item.thursday = this.thursdayChecked
        item.friday = this.fridayChecked
        item.saturday = this.saturdayChecked
        item.sunday = this.sundayChecked
      })
    },
    // 转换为需要的数据
    getRoomList(arr) {
      if (arr.length == 0) {
        return []
      }
      let arr1 = JSON.parse(JSON.stringify(arr))
      arr1.map(item => {
        item.backLock = item.backLock ? 1 : 0
        item.monday = item.monday ? 1 : 0
        item.tuesday = item.tuesday ? 1 : 0
        item.wednesday = item.wednesday ? 1 : 0
        item.thursday = item.thursday ? 1 : 0
        item.friday = item.friday ? 1 : 0
        item.saturday = item.saturday ? 1 : 0
        item.sunday = item.sunday ? 1 : 0
      })
      console.log(arr1)
      console.log(this.roomList)
      return arr1
    },
    // 设备型号
    //设备型号选项
    terminalselect() {
      this.terminaloption = []
      console.log(this.unitGuid)
      this.$http({
        url: this.$http.adornUrl('/terminal/terminal-model-select'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            terminalType: 22,
            unitGuid: this.unitGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          let Arr = data.messageContent
          if (this.terminaloption.length == 0) {
            for (var i = 0; i < Arr.length; i++) {
              var itemObj = {
                label: Arr[i].modelName,
                value: Arr[i].modelId
              }
              this.terminaloption.push(itemObj)
            }
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 获取到房内人员授权信息
    gestatistics() {
      console.log(this.roomGuid)
      if (this.datetime == null) {
        this.searchInfo.startTime = ''
        this.searchInfo.endTime = ''
      } else {
        this.searchInfo.startTime = this.datetime[0]
        this.searchInfo.endTime = this.datetime[1]
      }
      this.searchInfo.unitGuid = this.unitGuid
      this.searchInfo.merchantGuid = this.consumptionpoint
      if (this.radio == 0) {
        this.searchInfo.timeType = 0
      } else if (this.radio == 1) {
        this.searchInfo.timeType = 1
      } else {
        this.searchInfo.timeType = 2
      }
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(
          '/terminal/doorLock/room-empower-name-search-page'
        ),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: { roomGuid: this.roomGuid }
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading = false
        if (data.messageCode == 200) {
          console.log(data)
          this.detailslist = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 批量修改星期时段
    handleValOne(val, key) {
      if (this.optPersonnel.length == 0) {
        return false
      }
      this.optPersonnel.map(item => {
        item[key] = val
      })
    },
    // 添加人员
    createPersonnel() {
      this.addroomjonVisible = true
      let isPersonnel = true
      let isCheckbox = true
      this.$nextTick(() => {
        this.$refs.addroomjoin.addinit(this.roomGuid, isPersonnel, isCheckbox)
      })
    },
    // 当人员列表被选中
    handlePersonnelChange(val) {
      console.log(val)
      this.PersonnelChange = val
    },

    // 人员删除
    handlePersonnelDel() {
      let arr1 = JSON.parse(JSON.stringify(this.personnelList))
      let arr2 = JSON.parse(JSON.stringify(this.PersonnelChange))
      this.personnelList = this.getDelArr(arr1, arr2, 'userGuid')
      this.PersonnelChange = []
      console.log(this.personnelList, this.PersonnelChange)
    },

    // 添加人员弹框按确定
    refreshDataList(val) {
      console.log(val)
      //   this.personnelList = [...this.personnelList,...val]
      if (val.length > 0) {
        console.log(this.personnelList)
        console.log(this.val)
        // 深复制
        let arr1 = JSON.parse(JSON.stringify(this.personnelList))
        // 去重并合并
        this.personnelList = this.getRemoval(arr1, val, 'userGuid')
        console.log(this.personnelList.length)
      }
      // 关闭弹窗
      this.addroomjonVisible = false
      this.gestatistics()
    },
    // 弹窗关闭
    handleClose() {
      this.dialogVisible = false
    },

    // 添加房间
    createRoom() {
      this.addbuildroomVisible = true
      this.$nextTick(() => {
        this.$refs.addbuildroomjoin.addinit(this.roomGuid, this.isCheckbox)
      })
    },
    // 选择房间后返回数据
    refbuildDataList(val) {
      this.addbuildroomVisible = false
      if (val.length == 0) {
        return
      }
      let arr = []
      val.map(item => {
        let obj = { ...item }
        // 反锁开门
        obj.backLock = this.backLock
        // 开始时间
        obj.startTime = this.startTime
        // 结束时间
        obj.endTime = this.endTime
        // 假日时段
        obj.holidayTimeStageIndex = this.valHoliday
        // 时段一
        obj.mondayTimeStageIndex = this.valMonday
        obj.tuesdayTimeStageIndex = this.valTuesday
        obj.wednesdayTimeStageIndex = this.valWednesday
        obj.thursdayTimeStageIndex = this.valThursday
        obj.fridayTimeStageIndex = this.valFriday
        obj.saturdayTimeStageIndex = this.valSaturday
        obj.sundayTimeStageIndex = this.valSunday
        // 星期
        obj.monday = this.mondayChecked
        obj.tuesday = this.tuesdayChecked
        obj.wednesday = this.wednesdayChecked
        obj.thursday = this.thursdayChecked
        obj.friday = this.fridayChecked
        obj.saturday = this.saturdayChecked
        obj.sunday = this.sundayChecked
        arr.push(obj)
        console.log(obj)
      })

      let arr1 = JSON.parse(JSON.stringify(this.roomList))
      // 去重并合并
      this.roomList = this.getRemoval(arr1, arr, 'roomGuid')
      console.log(this.roomList.length)
      this.addbuildroomVisible = false
    },
    // 房间选中
    handleRoomChange(val, key) {
      console.log(val)
      this.RoomChange = val
    },
    // 房间删除
    handleRoomDel() {
      let arr1 = JSON.parse(JSON.stringify(this.roomList))
      let arr2 = JSON.parse(JSON.stringify(this.RoomChange))
      this.roomList = this.getDelArr(arr1, arr2, 'roomGuid')
      this.RoomChange = []
    },
    // 是否反锁关门
    backLockChange(val) {
      console.log(val)
      if (val) {
        this.backLock = 1
      } else {
        this.backLock = 0
      }
    },
    // 提交数据
    onSubmit() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.endTime == null) {
            this.$message({
              message: '时间必须选择',
              type: 'warning'
            })
            return
          }
          let messageContent = {}
          // 那个时段选中
          messageContent.mondayTimeStageIndex = this.valMonday
          messageContent.tuesdayTimeStageIndex = this.valTuesday
          messageContent.wednesdayTimeStageIndex = this.valWednesday
          messageContent.thursdayTimeStageIndex = this.valThursday
          messageContent.fridayTimeStageIndex = this.valFriday
          messageContent.saturdayTimeStageIndex = this.valSaturday
          messageContent.sundayTimeStageIndex = this.valSunday
          // 星期
          messageContent.monday = this.mondayChecked ? 1 : 0
          messageContent.tuesday = this.tuesdayChecked ? 1 : 0
          messageContent.wednesday = this.wednesdayChecked ? 1 : 0
          messageContent.thursday = this.thursdayChecked ? 1 : 0
          messageContent.friday = this.fridayChecked ? 1 : 0
          messageContent.saturday = this.saturdayChecked ? 1 : 0
          messageContent.sunday = this.sundayChecked ? 1 : 0
          // unitGuid
          messageContent.unitGuid = this.changeschoolid
          // 反锁
          messageContent.backLock = this.backLock ? 1 : 0
          // 角色名称
          messageContent.roleName = this.ruleForm.roleName
          // 假日时段
          messageContent.holidayTimeStageIndex = this.valHoliday
          // 设备类型
          messageContent.doorType = this.ruleForm.devicemodel
          // 开始时间
          messageContent.startTime = this.startTime
          // 相关人员信息
          messageContent.roleUserList = this.personnelList
          if (this.getRoomList(this.roomList).length != 0) {
            // 相关楼栋信息
            messageContent.roleNameList = this.getRoomList(this.roomList)
          }
          // 密码
          messageContent.doorPassword = this.password
          // 结束时间
          messageContent.endTime = this.endTime
          console.log(messageContent)
          this.$http({
            url: this.$http.adornUrl('/terminal/doorLock/empower-role-add'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: messageContent,
              messageType: 0
            })
          }).then(({ data }) => {
            this.loading = false
            if (data.messageCode == 200) {
              console.log(data)
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$refs['ruleForm'].resetFields()
              this.empty()
              this.set(false)
              this.$router.push('/door-lock-lock-role-management')
              // window.location.reload();
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        } else {
          return false
        }
      })
    },
    // 清空数据
    empty() {
      // 姓名
      this.userName = ''
      // 初始时间选择
      this.startTime = this.getimeto('yyyy-MM-dd HH:mm:ss')
      this.endTime = this.getNow(7)
      // 密码
      this.password = ''
      // 人员数组
      this.personnelList = []
      // 被选中的人员数组
      this.PersonnelChange = []
      // 房间数组
      this.roomList = []
      this.RoomChange = []

      this.detailslist = []
      this.pageNum = 1
      this.pageSize = 10
      this.currentPage = 1
      this.recordCount = 0
      this.searchInfo = {}
      // 姓名
      this.userName = ''
      // 初始时间选择
      this.startTime = this.getimeto('yyyy-MM-dd HH:mm:ss')
      this.endTime = this.getNow(7)
      // 密码
      this.password = ''
      // 是否反锁开门
      this.backLock = 0
      this.isCheck = false
      // 被选中的数据
      this.optPersonnel = []
      // 是否可以选择
      this.mondayChecked = false
      this.tuesdayChecked = false
      this.wednesdayChecked = false
      this.thursdayChecked = false
      this.fridayChecked = false
      this.saturdayChecked = false
      this.sundayChecked = false
      // 星期时段多选
      this.valMonday = 1
      this.valTuesday = 1
      this.valWednesday = 1
      this.valThursday = 1
      this.valFriday = 1
      this.valSaturday = 1
      this.valSunday = 1
      // 假日时段
      this.valHoliday = 1
    },
    // 关闭
    onClos() {
      this.$refs['ruleForm'].resetFields()
      this.empty()
      this.set(false)
      this.$router.push('/door-lock-lock-role-management')
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
}
// 多选框的样式
.checked {
  margin: 0 31px 0 0;
}
.door {
  padding: 10px;
  h3{
    margin-top:0;
    margin-bottom:5px;
  }
  //滚动条的宽度
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .el-form--inline .el-form-item {
    margin-bottom: 5px;
  }
  .demo-form-inline{
    width:calc(100vw - 20px - 190px);
    min-width: calc(1280px - 20px - 200px);
  }
}
.TimeWeek {
  padding: 20px 0 0;
}
.time {
  margin: 0 5px;
}
.el-dialog--center .el-dialog__body {
  padding: 0 50px;
}
// 隐藏纵向滚动条
</style>